<template>
    <div>
        <div class="brand">
            <breadcrumb :arrayName="brand" :hasIcon="hasIcon"></breadcrumb>
        </div>

        <div class="container">
            <el-row class="search">
				<div class="search-collapse">
					<!--普通搜索-->
					<el-input :placeholder="$t('fe.winName')" v-model="keysName"   size="small" class="search-box"   ></el-input>
					<el-button size="small" :disabled="!showBtn('ComSearch')"  @click="commonSearch" slot="append" icon="el-icon-search" class="btn-default search-btn"  ></el-button>
				</div>
				<!--折叠板-->
				<el-collapse class="search-collapse-content" @change="advanceSearch" v-model="activeName" accordion>
					<el-collapse-item>
						<template slot="title" class="search-collapse-title" >
							<span class="vertical-bar"></span>&nbsp;&nbsp;
							<span class="title-font" >{{$t(advSearch)}}</span>
						</template>
						<!-- 高级搜索具体内容 -->
						<!--中奖等级-->
						<el-row :gutter="10" class="row-search" >
							<el-col :span="2">
								<label class="label-search">{{$t('fe.winLevel')}}:</label>
							</el-col>
							<el-col :span="6">
								<el-select  size="small" v-model="level" :placeholder="$t('fe.pselect')">
								  <ElOption v-for="item in levels" :key="item.key" :label="item.label" :value="item.value"  ></ElOption>
								</el-select>
							</el-col>

							<!--奖金额度-->
							<el-col :span="2">
								<label class="label-search">{{$t('fe.prizeAmount')}}:</label>
							</el-col>
							<el-col :span="6">
								<el-input class="input-small" v-model="salary"  size="small" ></el-input>
							</el-col>

							<el-col :span="2">
								<label class="label-search">{{$t('fe.winName')}}:</label>
							</el-col>
							<el-col :span="6">
								<el-input class="input-small" v-model="names"  size="small" ></el-input>
							</el-col>
						</el-row>
						<!--兑奖状态-->
						<el-row :gutter="10" class="row-search">
							<el-col :span="2">
								<label class="label-search">{{$t('fe.winState')}}:</label>
							</el-col>
							<el-col :span="6">
                  				<el-select size="small" v-model="status" :placeholder="$t('fe.pselect')"  >
										<el-option v-for="item in statuss" :key="item.key" :label="item.label" :value="item.value" ></el-option>
								</el-select>
							</el-col>

							<el-col :span="2">
								<label class="label-search">{{$t('fe.winDate')}}:</label>
							</el-col>
							<el-col :span="6">
								<el-date-picker class="input-small timeform"
									v-model="winDate" type="daterange" unlink-panels 
									value-format="yyyy-MM-dd"
									:range-separator="$t('ndt.to')" 
									:start-placeholder="$t('ndt.begin_time')"
									:end-placeholder="$t('ndt.end_time')"
								></el-date-picker>
							</el-col>

						</el-row>
						
						<!--折叠板 高级搜索的两个按钮-->
						<el-row :gutter="10" class="row-search">
							<div class="btn-group-search" >
								<el-col :span="2">&nbsp;</el-col>
								<el-col :span="6">
									<!--查询按钮-->
									<el-button class="btn-default" :disabled="!showBtn('AdvSearch')" @click="search"   size="small">{{$t('te.query')}}</el-button>
									<!--重置按钮-->
									<el-button class="btn-second" :disabled="!showBtn('Reset')" @click="resetData" style="margin:0;"  size="small" >{{$t('te.reset')}}</el-button>
								</el-col>
							</div>
						</el-row>
					</el-collapse-item>

				</el-collapse>

			</el-row>

			<div style="height:15px;background-color:#F1F1F1;"></div>
			<!--表格部分-->
			<div>
                <el-row class="table-body"  >
					<el-table :data="tableData" border ref="winTable" @selection-change="selectChange" >
						<el-table-column  type="selection"  align="center"   width="55" ></el-table-column>
					  	<el-table-column :label="$t('cm.no')" type="index" width="55"></el-table-column>
					  	<!-- 这里面的数据应该是根据流程的信息来的 -->
					  	<el-table-column   :label="$t('fe.winLevel')">
						  	<template slot-scope="scope">
								<div v-if="showBtn('FormLook')">
									<a href="#"  @click="showDetails(scope.row)" >
										<div v-if="scope.row.cudWinLevel == '1' ">一等奖</div>
										<div v-else-if="scope.row.cudWinLevel == '2' ">二等奖</div>
										<div v-else>三等奖</div>
									</a>
								</div> 
								<div v-else>
									<div v-if="scope.row.cudWinLevel == '1' ">一等奖</div>
									<div v-else-if="scope.row.cudWinLevel == '2' ">二等奖</div>
									<div v-else>三等奖</div>
								</div>
						  	</template>
					  	</el-table-column>
					  	<el-table-column prop="cudPrizeAmount" :label="$t('fe.prizeAmount')"></el-table-column>
					  	<el-table-column prop="cudWinName" :label="$t('fe.winName')"></el-table-column>
					  	<el-table-column prop="cudWinSpeech" :label="$t('fe.winTalk')"></el-table-column>
					  	<el-table-column :label="$t('fe.winState')">
							<template slot-scope="scope">
								<div v-if="scope.row.cudWinState == 0">待兑奖</div>
								<div v-else>已兑奖</div>
							</template>
						</el-table-column>
						<el-table-column prop="cudWinDate" :label="$t('fe.winDate')"></el-table-column>
						  
					  	<el-table-column :label="$t('cm.operate')">
						  	<template slot-scope="scope">
						  		<el-button type="text" v-if="showBtn('FormLook')" size="small" @click="showDetails(scope.row)" >{{$t('cm.look')}}</el-button>
								<el-button type="text" v-if="showBtn('FormEdit')" size="small" @click="updateData(scope.row)">{{$t('cm.update')}}</el-button>
								<el-button type="text" v-if="showBtn('FormDel')" size="small" @click="delData(scope.row)" >{{$t('cm.delete')}}</el-button>
							</template>
					  	</el-table-column>
					</el-table>
				</el-row>    
				
				<el-row class="table-bottom">
					<!--按钮-->
					<div class="table-bottom-btn-group" >
						<el-checkbox v-model="isSelected" @change="checkSelected" ></el-checkbox>
						<!--添加-->
						<el-button class="btn-default btn1 " :disabled="!showBtn('FormAdd')"  @click="addData"  size="small"  >{{$t('cm.add')}}</el-button>
						<el-button class="btn-default btn2 " :disabled="showBtn('FormEdit') && showDisabled" @click="updData"   size="small"  >{{$t('cm.update')}}</el-button>
						<el-button type="danger" :disabled="!showBtn('FormDel')" class="btn3" @click="batchDel(tableData)"  size="small"  >{{$t('cm.delete')}}</el-button>

					</div>
					<!-- 翻页 
							current-page 表示当前页
							page-size 表示一页显示的条数
							page-count 表示总页数
							total 表示总条数
					-->
					<el-pagination ref="pager"
							@size-change="changeSize"
							@current-change="changeCurrentPage"
							@prev-click="prePage"
							@next-click="nextPage"
							:current-page="currentPage"  
							:page-sizes="[10, 20, 30, 40]"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
					</el-pagination>
				</el-row>
            </div>    
        </div>

		<!--详情的展示框-->
		<el-dialog :title="$t('te.detail_page')" 
		:class="changeCollapse?'dialog-open':'dialog-shrink'" 
		width="60%" 
		:visible.sync="showDialog" >
			<redemp_details :win="winDetails" @closeWindows="closeDialog" ></redemp_details>
		</el-dialog>

    </div>
</template>

<script>
    import redemp_manage from './js/redemp_manage.js'
    export default redemp_manage
</script>


<style>
</style>